<!DOCTYPE html>
<html lang="en"><!-- Mirrored from localhost:8080/PET_STOREMVC0702_war_exploded/index.action by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 02 Nov 2024 09:39:23 GMT --><!-- Added by HTTrack --><head><meta http-equiv="content-type" content="text/html;charset=UTF-8"><!-- /Added by HTTrack -->

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新青年宠物销售平台</title>
    <style>
        .chat-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            max-width: 300px;
            width: 300px;
            height: 400px;
            overflow-y: auto;
            border: 1px solid #ccc;
            background-color: white;
            z-index: 999;
            transition: all 0.3s ease;
            transform: translateX(100%);
            /* 默认隐藏 */
        }

        .chat-container.show {
            transform: translateX(0);
            /* 显示时恢复位置 */
        }

        .chat-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background-color: #f0f0f0;
        }

        .chat-history {
            padding: 10px;
            height: calc(100% - 80px);
            overflow-y: auto;
        }

        .chat-input {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
        }
        #chatHistory {
            height: 250px;
            overflow-y: scroll;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
        }
        .message {
            margin: 10px 0;
        }
        .user {
            text-align: right;
        }
        .ai {
            text-align: left;
        }
        #userInput {
            width: 100%;
            padding: 10px;
            margin-top: 20px;
            box-sizing: border-box;
        }
        #sendButton {
            display: block;
            margin-top: 10px;
        }
    </style>




<link href="style/bootstrap.css" rel="stylesheet">
<link href="style/gsdk.css" rel="stylesheet">
<link href="style/demo.css" rel="stylesheet">
<link href="style/cooriku.css" rel="stylesheet">
<link href="style/font-awesome.css" rel="stylesheet">
<link rel="shortcut icon" href="icon.ico" type="image/x-icon">

</head>
<body style="">





<div id="navbar-full">
    <div class="container">
        <nav class="navbar navbar-ct-blue navbar-fixed-top navbar-transparent" role="navigation">

            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#">
                        <div class="logo-container">
                            <div class="logo">
                                <img src="img/logo-top1.png">
                            </div>
                            <div class="brand">
                                新青年宠物店
                            </div>
                        </div>
                    </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button">搜索宠物 <b class="caret"></b></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a class="dropdown-item" style="color: blue" th:href="@{/moredogs}">搜索狗狗</a></li>
                                <li><a class="dropdown-item" style="color: blue" th:href="@{/morecats}">搜索猫咪</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button">宠物词典<b class="caret"></b></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a class="dropdown-item" style="color: blue" th:href="@{/Havedogs}">狗狗的饲养方法</a></li>
                                <li><a class="dropdown-item" style="color: blue" th:href="@{/Havecats}">猫咪的饲养方法</a></li>
                            </ul>
                        </li>
                        <!-- 登录和注册按钮 -->
                        <li class="nav-item" th:if="${username == null}">
                            <button style="color: #4e498f;" name="pet-detail" class="btn btn-coo-blue btn-tooltip" role="button" data-toggle="tooltip" data-placement="right" title="" data-original-title="Let's search" th:onclick="|window.location.href='@{/login}'|">登录</button>
                        </li>
                        <li class="nav-item" th:if="${username == null}">
                            <button style="color: #4e498f;" name="pet-detail" class="btn btn-coo-blue btn-tooltip" role="button" data-toggle="tooltip" data-placement="right" title="" data-original-title="Let's search" th:onclick="|window.location.href='@{/zhuce}'|">注册</button>
                        </li>

                        <!-- 欢迎信息和退出登录按钮 -->
                        <li class="nav-item" th:if="${username != null}">
                            <a href="" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button">欢迎您尊贵的<span th:text="${username}" class="nav-link nav-link dropdown-toggle" style="color: blue;"></span>新青年宠物店VIP贵宾，点我修改个人信息!<b class="caret"></b></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a class="dropdown-item"  style="color: blue" th:href="@{/upUser}">修改个人资料</a></li>
                                <li><a class="dropdown-item"  style="color: blue" th:href="@{/myLove}">我的喜爱</a></li>
                                <li><a class="dropdown-item"  style="color: blue" th:href="@{/userSubscribe}">我的预约</a></li>
                                <li><a class="dropdown-item" style="color: blue" th:href="@{/quituser}">退出登录</a></li>

                            </ul>
                        </li>
                    </ul>
                </div>


                </div>
        </nav>
    </div><!--  end container-->

    <div class="blurred-container">
        <div class="motto">
            <div>We</div>
            <div class="border">Love</div>
            <div>Pet</div>
        </div>

        <div class="img-src" style="background-image: url('img/service/top-service.jpg')"></div>
        <div class="img-src blur" style="background-image: url(&quot;img/service/top-service.jpg&quot;); opacity: 0;"></div>
    </div>
</div>


<div class="main">
    <div class="container tim-container">
        <div id="images">
            <form id="petForm" th:action="@{/dogsDetails}">
            <div class="coo-title" style="display: flex; justify-content: space-between;">
                <div style="margin-right: auto;">
                    <h3>热门宠物 <small> 请选择您的心意宠物 </small></h3>
                </div>
                <select id="skills" class="form-control form-control-placeholder" style="width: 200px;height: 50px" name="petdetail" onchange="updateFormAction(this)">
                    <option value="363" data-action="dogsDetails">热门卷毛比熊犬</option>
                    <option value="358" data-action="dogsDetails">热门柴犬</option>
                    <option value="357" data-action="dogsDetails.">爆款边境牧羊犬</option>
                    <option value="354" data-action="dogsDetails">爆款约克夏犬</option>
                    <option value="331" data-action="dogsDetails">爆款巴哥</option>
                    <option value="302" data-action="dogsDetails">爆款玩具贵宾犬</option>
                    <option value="433" data-action="catsDetails">爆款玳瑁</option>
                    <option value="337" data-action="catsDetails">热门金渐层猫</option>
                    <option value="337" data-action="catsDetails">热门中华田园橘</option>
                    <option value="320" data-action="catsDetails">热门布偶猫</option>
                    <option value="246" data-action="catsDetails">热门英国短毛猫</option>
                    <option value="268" data-action="catsDetails">热门德文卷毛猫</option>
                    <option value="317" data-action="catsDetails">热门拿破仑猫</option>
                </select>
                <button type="submit" class="btn btn-coo-blue btn-tooltip" style="width: 100px;height: 50px">搜索</button>
            </div>
            </form>
            <div class="row">



                <div th:each="pets : ${index_petsList}">
                    <div class="col-md-3 col-sm-6 text-center">
                        <h4 class="coo-text-green" th:text="${pets.name}">宠物名称</h4>
                        <img th:src="@{${pets.imagePath}}" alt="No.{{pets.queryNumber}} pet image" class="img-circle img-responsive">
                        <div class="space-30"></div>
                        <table class="tbl-pet">
                            <tbody>
                            <tr>
                                <th>查询号码</th>
                                <td th:text="${pets.queryNumber}">查询号码</td>
                            </tr>
                            <tr>
                                <th>性别</th>
                                <td th:text="${pets.gender}">性别</td>
                            </tr>
                            <tr>
                                <th>生日</th>
                                <td th:text="${#dates.format(pets.birthday, 'yyyy-MM-dd')}">生日</td>
                            </tr>
                            <tr>
                                <th>价格</th>
                                <td th:text="${pets.price}">价格</td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="btn-pet">
                            <button name="pet-detail" class="btn btn-coo-blue btn-tooltip" role="button"
                                    data-toggle="tooltip" data-placement="right" title=""
                                    th:onclick="'window.location.href=\'' + @{/dogsDetails} + '?petdetail=' + ${pets.queryNumber} + '\''"
                                    data-original-title="Let's search">点击详情 »</button>
                            <div class="tooltip fade right in" style="top: 550px; left: 180px; display: block;">
                                <div class="tooltip-arrow" style=""></div>
                                <div class="tooltip-inner">点我进入详情~</div>
                            </div>
                        </div>
                    </div>
                </div>



            </div>
            <div class="space-30"></div>

            <div class="text-center">
                <p class="coo-text-brown">想买狗狗或者买猫猫的顾客，<br>请按下面的按钮搜索您喜欢的宠物</p>
            </div>
            <div class="space-30"></div>

            <div class="row" id="buttons">
                <div class="col-sm-6 text-center">
                    <button  onclick="window.location.href='/moredogs'" class="btn btn-block btn-lg btn-fill btn-coo-pink btn-tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="Let's search">搜索其他狗狗</button>
                </div>
                <div class="col-sm-6 text-center">
                    <button  onclick="window.location.href='/morecats'" class="btn btn-block btn-lg btn-fill btn-coo-orange btn-tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="Let's search">搜索其他猫猫</button>
                </div>
            </div>
        </div><!-- end new faces -->

        <div class="space-30"></div>

        <div class="container tim-container">
            <section id="new">
                <div class="coo-title">
                    <h3>最新信息<small> News </small></h3>
                </div>
                <ul>
                    <li class="coo-news">
                        <span>NEWS</span>
                        <time datetime="2024-12-07">[ 2024-11-07 ]</time>
                        <p>新青年宠物店主页精修采用 Bootstrap 构建快速、响应式布局的网站，让美化做到极致。</p>
                    </li>
                    <li class="coo-news">
                        <span>OPEN</span>
                        <time datetime="2024-12-03">[ 2024-11-03 ]</time>
                        <p>新青年宠物店主页开通。</p>
                    </li>
                    <li class="coo-news">
                        <span>OPEN</span>
                        <time datetime="2024-12-01">[ 2024-11-01 ]</time>
                        <p>新青年宠物店需求文档构建完毕。</p>
                    </li>
                </ul>
            </section>
        </div><!-- end news -->
    </div>
    <div class="space-30"></div>
</div>
<div class="main coo-bg-light">
    <div class="container">
        <div class="coo-title">
            <h3 class="text-center">我们的理念<br><small>Concept</small></h3>
        </div>
        <section class="concept">
            <p>新青年宠物是一家照料宠物生命，拥有与众不同的重大责任的企业。希望通过我们的努力，能让更多的客户体验到迎接新家庭成员的喜悦。因此，新青年宠物立下三项承诺。</p>
            <div class="row">
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="img/love-pet_170.png">
                        <div class="caption">
                            <h5 class="coo-text-brown">让客户安心购买<i class="fa fa-heart heart" alt="love"></i></h5>
                            <p>我们承诺给您健康的狗狗和猫咪。并且，我们独特的售后服务会让您没有后顾之忧。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="img/search_170.png">
                        <div class="caption">
                            <h5 class="coo-text-brown">易于搜索的网站<i class="fa fa-search search" alt="search"></i></h5>
                            <p>每只爱宠都有自己独特的性格和外表。我们的网站能让您找到和您有缘的那只。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="img/move_170.png">
                        <div class="caption">
                            <h5 class="coo-text-brown">世界上独一无二的！<i class="fa fa-gift gift" alt="gift"></i></h5>
                            <p>我们会将您的新家庭成员，送到离您最近的新青年宠物店铺，方便您的迎接。</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
<div class="main">
    <div class="container">
        <div class="coo-title">
            <h3>服务内容 <small> Our service </small></h3>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/service/icon_trimming.png">
                    <div class="caption">
                        <h5 class="coo-text-green">宠物美容</h5>
                        <p class="coo-text-lightbrown">专业工作人员使用精心挑选的洗发水为爱宠提供美容服务，让她拥有健康干净的皮毛。</p>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/service/icon_hotel.png">
                    <div class="caption">
                        <h5 class="coo-text-pink">宠物酒店</h5>
                        <p class="coo-text-lightbrown">请放心的将您的爱宠寄养在我们的宠物酒店。我们会每天进行健康检查，定期带爱宠散步。</p>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/service/icon_catcafe.png">
                    <div class="caption">
                        <h5 class="coo-text-orange">猫咖啡馆</h5>
                        <p class="coo-text-lightbrown">因为各种环境因素而不能养宠物的朋，请来我们的猫咖啡和猫咪共度悠闲时光，过足撸猫瘾。</p>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/service/icon_dogpark.png">
                    <div class="caption">
                        <h5 class="coo-text-yellow">狗狗公园</h5>
                        <p class="coo-text-lightbrown">免费为新青年宠物店会员开放的宠物公园的介绍。我们一直为您的狗狗健康加油。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="space-30"></div>
</div>
<div class="main coo-bg-light">
    <div class="container">
        <div class="coo-title">
            <h1 class="text-center"><small class=" coo-text-brown">新青年宠物店</small></h1>
        </div>
        <hr>
        <div id="extras">
            <div class="row">
                <div class="col-md-5 order-md-1">
                    <div class="text-center">
                        <img src="img/chinesestores.jpg" alt="新青年宠物店舗地図" class="img-rounded img-responsive img-dog">
                    </div>
                </div>
                <div class="col-md-7 order-md-2">
                    <p class="lead">新青年宠物店是软件10班赵纬和洪树军的大三架构大作业。</p>
                    <p>
                        <a href="#" class="btn btn-coo-brown btn-fill btn-md" role="button">赵纬和洪树军大作业 点我回到顶部 »</a>
                    </p>
                    <br>
                    <p class="lead">新青年宠物店每一个设计都是精挑细选。</p>
                    <div class="row mb-3">
                        <div class="pull-left">
                            <a href="#" class="btn btn-coo-orange btn-fill btn-md btn-tooltip ml-1" role="button" data-toggle="tooltip" data-placement="top" title="" data-original-title="View detail">新青年宠物店精选宠物 点我回到顶部  »</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="space-30"></div>
</div>

<!--<div class="container chat-container show">-->
<!--    <div class="chat-header">-->
<!--        <span>ChatGPT6.0宠物店管家</span>-->
<!--        <button class="toggle-chat-button btn btn-coo-blue btn-tooltip">点我隐藏</button>-->
<!--    </div>-->
<!--    <div id="chatHistory" class="chat-history">-->
<!--        &lt;!&ndash; AI 或 用户的消息将在这里显示 &ndash;&gt;-->
<!--    <div class="ai">ChatGPT6.0宠物店管家:  你好!欢迎光临新青年宠物店，我是ChatGPT6.0宠物店管家，请问有什么可以帮助您~~！</div></div>-->
<!--    <div class="chat-input">-->
<!--        <input type="text" id="userInput" placeholder="输入您想提问的问题...">-->
<!--        <button id="sendButton" type="submit" class="btn btn-coo-blue btn-tooltip">发送</button>-->
<!--    </div>-->
<!--</div>-->




<div class="parallax-pro">
    <div class="img-src" style="background-image: url('img/image-dogrun2.jpg');"></div>
    <div class="container"><div class="row"><div class="col-md-6 text-center">
        <h3><small>跳转到新青年宠物店媒体官方：</small></h3>
        <p>
            <small>
            </small></p><ul class="list-unstyled"><small>
        <li><a href="https://space.bilibili.com/456611364?spm_id_from=333.1007.0.0" target="_brank">Ai喵咪皇帝</a></li>
        <li><a href="https://space.bilibili.com/456611364?spm_id_from=333.1007.0.0" data-toggle="modal" data-target="#wechatModal">哔哩哔哩</a></li>
        <li><a href="https://space.bilibili.com/456611364?spm_id_from=333.1007.0.0" data-toggle="modal" data-target="#wechatModal">哔哩哔哩</a></li>
        <li><a href="https://space.bilibili.com/456611364?spm_id_from=333.1007.0.0" data-toggle="modal" data-target="#wechatModal">哔哩哔哩</a></li>
    </small></ul><small>
    </small>
        <p></p>
    </div><div class="col-md-6 text-center">
        <h3><small>软件工程项目实践课</small></h3>
        <p>
            <small>
            </small></p><ul class="list-unstyled"><small>
        <li>尊师：田广强</li>
        <li>css样式采用：bootstrap</li>
        <li>图片素材由百度图片提供</li>
        <li>已经将该项目投放gitee，欢迎wink!!!~~~</li>
    </small></ul><small>
    </small>
        <p></p>
    </div></div>
        <div class="space-30"></div><div class="row">

        </div><div class="row">
            <div class="col-md-12 text-center">
                <div class="credits">
                    洪树军和赵纬的大作业新青年宠物销售平台
                </div>
            </div>
        </div></div>
    <!--<audio autoplay loop>
       <source src="/PET_STOREMVC0702_war_exploded/mp3/song.mp3" type="audio/mpeg">
        您的浏览器不支持 HTML5 audio 标签。
    </audio>-->
</div>
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/gsdk-bootstrapswitch.js"></script>
<script src="js/get-shit-done.js"></script>
<script src="js/custom.js"></script>
<script>
    document.getElementById('sendButton').addEventListener('click', function () {
        var userInput = document.getElementById('userInput');
        var userMessage = userInput.value.trim();
        if (userMessage !== '') {
            addMessage('user', userMessage);
            userInput.value = '';
            // 这里你可以调用你的AI接口来获取响应
            setTimeout(function () {
                var aiResponse = generateAIResponse(userMessage); // 这个函数需要你实现
                addMessage('ai', aiResponse);
            }, 1000);
        }
    });
    // 检查 loginSuccess 和 message 变量
    document.addEventListener("DOMContentLoaded", function() {
        var loginSuccess = [[${loginSuccess}]];
        var message = "[[${message}]]";

        if (loginSuccess !== undefined && loginSuccess) {
            alert("Success! " + message);
        }
    });
    document.addEventListener('DOMContentLoaded', function() {
        addMessage('ai', "ChatGPT6.0宠物店管家:  你好!欢迎光临新青年宠物店，我是ChatGPT6.0宠物店管家，请问有什么可以帮助您~~！");
    });

    function addMessage(sender, message) {
        var chatHistory = document.getElementById('chatHistory');
        var messageDiv = document.createElement('div');
        messageDiv.className = sender;
        messageDiv.textContent = message;
        chatHistory.appendChild(messageDiv);
        chatHistory.scrollTop = chatHistory.scrollHeight; // 自动滚动到底部
    }
    function updateFormAction(selectElement) {
        var form = document.getElementById('petForm');
        var selectedOption = selectElement.options[selectElement.selectedIndex];
        var actionValue = selectedOption.getAttribute('data-action');
        var petId = selectedOption.value;

        // 构建完整的 URL
        form.action = '/' + actionValue + '?id=' + petId;
    }
    function generateAIResponse(userMessage) {
        // 这里应该有你的AI逻辑来生成响应
        // 为了演示，我们只是简单地返回用户消息加上 "AI says:"
        if(userMessage === "你好" || userMessage === "hello"){
            return "ChatGPT6.0宠物店管家:  你好!欢迎光临新青年宠物店，我是ChatGPT6.0宠物店管家，请问有什么可以帮助您~~！";
        }else if (userMessage === "给我推荐一个宠物" ||userMessage ==="给我推荐宠物" ||userMessage==="推荐宠物") {
            return "ChatGPT6.0宠物店管家:  !欢迎光临新青年宠物店，我是ChatGPT6.0宠物店管家，这里给您推荐首页热门的卷毛比熊犬，是镇店之宝卖的非常好！！价格限时减免500元！欢迎选购";
        }else if(userMessage ===""){
            return "ChatGPT6.0宠物店管家:  你好!欢迎光临新青年宠物店，我是ChatGPT6.0宠物店管家，请问有什么可以帮助您~~！";
        }else{
            return "ChatGPT6.0宠物店管家: " + "您询问的问题" + "(" + userMessage + ")" + "需要您亲自联系店长赵纬和洪树军进行提问，ChatGPT6.0宠物店管家暂时无法帮助您，谢谢您的提问！~~";
        }

    }
    window.addEventListener('DOMContentLoaded', function () {
        const container = document.querySelector('.chat-container');
        container.classList.add('show');
    });
    document.querySelector('.toggle-chat-button').addEventListener('click', function () {
        const container = document.querySelector('.chat-container');
        container.classList.toggle('show');
    });
    function updateFormAction(selectElement) {
        const form = document.getElementById('petForm');
        form.action = selectElement.options[selectElement.selectedIndex].getAttribute('data-action');
    }

</script>



</body><!-- Mirrored from localhost:8080/PET_STOREMVC0702_war_exploded/index.action by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 02 Nov 2024 09:40:03 GMT --></html>
</html>